<template>
     <view>

		<view class="tabs">
			<view class="search-box">
				<view class="userhead">
					<button type="primary" style="margin-left: 10px;" size="mini" @click="showDrawer">查询<uni-icons type="search" color="white" size="10"></uni-icons></button>
				</view>
				<view class="search">
					<view>
						<uni-search-bar placeholder="编号" :radius="100" v-model="parameter.no" bgColor="#EEEEEE" @blur="search" />
					</view>
					
				</view>
				
			</view>
			<uni-drawer ref="showRight" mode="right" @change="change($event,'showRight')">
								<view class="close">
									<button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
								</view>
								<view style="margin-top: 10px;">
									<uni-row :gutter="16">
										<uni-col :span="6">
											<view style="margin-left: 10px;margin-top: 5px;">
												<span style="font-size: 14px;">姓名:</span>
											</view>
										</uni-col>
										
										<uni-col :span="16">
											<uni-easyinput v-model="parameter.name" type="text" placeholder="姓名" />
										</uni-col>
										</uni-row>
										<view style="margin-top:10px">
											<uni-row :gutter="16">
												<uni-col :span="6">
													<view style="margin-left: 10px;margin-top: 5px;">
														<span style="font-size: 14px;">编号:</span>
													</view>
												</uni-col>
												
												<uni-col :span="16" >
													<uni-easyinput v-model="parameter.no" type="text" placeholder="编号" />
												</uni-col>
												</uni-row>
										</view>
										
										<view class="add-div">
											<uni-row :gutter="16">
												<uni-col :span="12">
													<view style="margin: 10px;">
														<button type="primary" @click="SelectClear">清空</button>
													</view>
													
												</uni-col>
												
												<uni-col :span="12">
													<view style="margin: 10px;">
														<button type="primary" @click="SelectData">查询</button>
													</view>
												</uni-col>
											</uni-row>
										</view>

								</view>
							</uni-drawer>
			
		
		</view>
			<view class="line" style="clear:both;"></view>
		 <view class="list">
			
						<uni-card  v-for="(item,index) in ownerList" :key="item.id"  padding="10px 0" :thumbnail="avatar" >
							<template v-slot:title>
												<uni-list>
													<uni-list-item :title="item.name">
														
														</uni-list-item>
													
													
												</uni-list>
											</template>
										
										<view>
											<text class='owner-type'>调查状态:</text><text class='owner-data'>{{item.status===1?'未调查':'已调查'}}</text><br>
										</view>
										
										<view slot="actions" class="card-actions">
											
											<view class="card-actions-item" @click="Willness(item)">
												<uni-icons type="calendar" size="18" color="#1890ff"></uni-icons>
												<text class="card-actions-item-text">意愿调查</text>
											</view>
											<view class="card-actions-item" @click="Jump('../contact/message',item)">
												<uni-icons type="folder-add" size="18" color="#1890ff"></uni-icons>
												<text class="card-actions-item-text">沟通备注</text>
											</view>
										</view>
									</uni-card>

			 <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
			 <view>
			 			<!-- 普通弹窗 -->
			 			<uni-popup ref="popup" background-color="#fff">
			 				<view class="quote">
			 					<view>
			 					       <!-- <uni-segmented-control style="border-color:#999" :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#00ae66"></uni-segmented-control> -->
			 					        <view class="content">

											<!-- <view style="text-align: center;font-size: 20px;">
												意愿调查
											</view> --><uni-forms  ref="form" :modelValue="model" :rules="rules">
														<uni-forms-item  name="levy" label="征收意愿:" required>
															<uni-data-checkbox v-model="model.levy" :localdata="levy" />
														</uni-forms-item>
														<uni-forms-item name="compensate" label="补偿方式:">
														      <uni-data-select
														        v-model="model.compensate"
														        :localdata="compensate"
														      ></uni-data-select>
														</uni-forms-item>
														
														<button class="button" @click="submitSave">保存</button>
													</uni-forms>
			 										
			 					        </view>
			 					    </view>
			 				</view>
			 				
			 			</uni-popup>
			 		</view>

		 </view>
		
		 
		 
		 
     </view>
 </template>

<script>
export default {
	data() {
		return {
			  parameter:{page:1,pagesize:6,pid:0,from:'WX'},
			  status: 'more',
			  isMore: true,
			  type: 'center',
			  project: {},
			  signPic:"",
			  levy: [{
			  		text: '是',
			  		value: true
			  	}, {
			  		text: '否',
			  		value: false
			  	}],
			  compensate: [{
					text: '货币',
					value: 1
				}, {
					text: '调产',
					value: 2
				}, {
					text: '混合',
					value: 3
				}],
			  ownerList: [],
			  current: 0,
			  model:{ id:0 },
			  isEdit:false,
			  ownermodel: {},
			  contentText: {
			  	contentdown: '上拉加载更多',
			  	contentrefresh: '加载中',
			  	contentnomore: '没有更多'
			  },
			  rules: {
			  	levy: {
			  		rules: [{
			  			required: true,
			  			errorMessage: '请选择征收意愿'
			  						}]
			  						
			  		}
			  	}
		}
	},
	onLoad() {
		console.log('onload')
		this.GetProject()
		this.getData()
	},
	onShareAppMessage: function () {
	
	},
	onShow(){

		if(this.project.id != this.$storage.getJson('project').id){
			this.ownerList = []
			this.parameter.page = 1
			this.project = this.$storage.getJson('project')
			this.parameter.pid = this.project.id
			this.getData()
		}
		if (this.$storage.getData('refresh')=='1') {
			this.ownerList = []
			this.parameter.page = 1
			this.getData()
			this.$storage.setData('refresh','')
		}
	},
	onReachBottom() {
		if (this.isMore) {
			this.status = 'more';
			this.parameter.page++;
			this.getData();
		}
	},
	onPullDownRefresh() {
		this.ownerList = []
		this.parameter.page = 1
		this.GetProject()
		this.getData();
	 setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		SelectClear(){
			this.parameter.name=''
			this.parameter.no = ''
		},
		SelectData(){
			this.$refs.showRight.close();
			this.ownerList = []
			this.parameter.page = 1
			this.getData();
		},
		showDrawer() {
						this.$refs.showRight.open();
					},
					closeDrawer() {
						this.$refs.showRight.close();
					},
		sign(url,item){
			if(item.signaturePath !=undefined && item.signaturePath != '[]' && item.signaturePath !=''){
				this.model = item
				var url = JSON.parse(this.model.signaturePath)
				this.signPic = this.$api.getUrl(url.url)
				this.$refs.sign.open('center')
			} else {
				this.Jump(url,item)
			}
		},
		Jump (url,record) {
			let path = url+"?hid="+record.id+'&pid='+record.pid
			console.log(path)
			uni.navigateTo({
				url: path
			});
		},
		deleteSign(){
			this.model.signaturePath = '[]'
			this.isEdit = true
			this.submitSave()
		},
		search () {
			this.parameter.page = 1
			this.ownerList = []
			this.getData();
		},
		submitSave (){
			this.$refs.form.validate(['id'],(err)=>{
				if(!err){
					if(!this.isEdit){
						this.$request.postU(this.$api.OwnerWillingness.add,this.model).then(res=>{
							console.log('3333', this.model)
							if(res.code==0) {
								uni.showToast({
								title: '新增成功'
								}) 
								this.model = {}
								
								setTimeout(() =>{
												uni.reLaunch({
												    url: '../contact/list'
												});			
											}, 1000);
										
							}
						});
					} else {
						this.$request.postU(this.$api.OwnerWillingness.update,this.model).then(res=>{
							if(res.code==0) {
								uni.showToast({
								title: '编辑成功'
								}) 
								this.model = {}
								setTimeout(() =>{
												uni.reLaunch({
												    url: '../contact/list'
												});			
											}, 1000);
								
							}
						});
					}
				}
			})

		},
		change(e,a){
			console.log(e,a)
		},
		toggle(type) {
						this.type = type
						// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
						this.$refs.popup.open(type)
					},
	    select(e){
			   console.log(e,this.parameter)
		   },
		   Willness (record) {
			   this.ownermodel = record
			   if(record.status===1) {
				   console.log('1111')
				   this.model = {}
				   this.model.pid = record.pid
				   this.model.hid = record.id
			   } else {
				   console.log('22222')
				   this.isEdit = true
				   this.$request.postU(this.$api.OwnerWillingness.get,{hid: record.id},'form').then(res=>{
				   	this.model = res.data
				   });
			   }
			   this.toggle('center')
		   },
		   GetProject(){
			   // this.$storage.setData('refresh','1')
			   // this.$storage.getData('refresh')
			   var check = this.$storage.getJson('project')
			   if(check==undefined){
				   uni.showToast({
				   icon: "none",
				   title: '未选定项目'
				   })
				   setTimeout(function() {
				   			uni.switchTab({
				   				url:'/pages/project/index'
				   			})
				   		}, 2000);
			   } else {
				   this.project =this.$storage.getJson('project')
				   this.parameter.pid = this.project.id
			   }
		   },
		   getData:function(){
		   	this.status = 'loading';
		   	this.$request.postU(this.$api.owner.list,this.parameter).then(res=>{
		   		if(res.data.length > 0) {
		   			
		   			this.ownerList = this.ownerList.concat(res.data)
		   			if(this.ownerList.length < res.count) {
		   				this.status = 'more';
		   				this.isMore = true;
		   			} else {
		   				this.status = 'noMore';
		   				this.isMore = false;
		   			}
		   		} else {
		   			this.status = 'noMore';
		   			this.isMore = false;
		   		}
		   		
		   	});
		   }
		}
	}
</script>

<style>
	.add-div {
		position: fixed;
		bottom: 0px;
		font-size: 0;
		line-height: 0;
		z-index: 100;
		width: 100%;
	}
	.owner-type {
		font-size: 12px;
		font-weight: bold;
	}
	.owner-data {
		font-size: 12px;
	}
	.line{height: 10px;background: #fff;}
	.button {
		    background: #c79e68;
		    color: #FFF;
	}
	.quote {
	    padding: 20px 20px 10px 20px;
	    box-shadow: 0 0 10px #e4e4e4;
		width:250px
	}
	.quote-title{   
		width: 300px;
		background: #373737;
		color: #fff;
		font-size: 14px;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		margin-bottom: 10px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.card-actions-item{
		display: flex;
		width:50%;
		justify-content: center;
		flex-direction: row;
		float: left;
	}
	.uni-list-item__content-title{
		font-size: 18px !important;
		font-family: Microsoft YaHei;
	}
	.card-actions-item-text{
		font-size: 14px;
		font-family: Microsoft YaHei;
		padding-top: 3px;
	}
 .content1{
     height: 60upx;
 }
 .input {
 		font-size: 18px;
 		border: 1px solid #DCDFE6;
 		border-radius: 4px;
 		padding: 6px 10px;
 		position: relative;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 	}
 
 	.scroll-h {
 		/*width: 750rpx;*/
 		/* #ifdef H5 */
 		width: 100%;
 		/* #endif */
 		height: 80rpx;
 		flex-direction: row;
 		/* #ifndef APP-PLUS */
 		white-space: nowrap;
 		/* #endif */
 		/* flex-wrap: nowrap; */
 		/* border-color: #cccccc;
 		border-bottom-style: solid;
 		border-bottom-width: 1px; */
 		margin-top: 10px;
 	}
	
 
 	.uni-tab-item {
 		/* #ifndef APP-PLUS */
 		display: inline-block;
 		/* #endif */
 		flex-wrap: nowrap;
 		/* padding-left: 15rpx; */
 		/* padding-right: 15rpx; */
 		width: 25%;
 		text-align: center;
 	}
 
 	.uni-tab-item-title {
 		color: #555;
 		font-size: 30rpx;
 		height: 80rpx;
 		line-height: 80rpx;
 		flex-wrap: nowrap;
 		text-align: center;
 		/* #ifndef APP-PLUS */
 		white-space: nowrap;
 		/* #endif */
 	}
 
 	.uni-tab-item-active {
 		border-bottom: 2px solid #1890ff;
 	}
 
 	.uni-tab-item-title-active {
 		color: #1890ff;
 	}
 
 	.cart-box {
 		position: relative;
 		height: 100rpx;
 		width: 100%;
 		margin-top: 0rpx;
 		border-bottom: 6rpx solid #f5f5f5;
 	}
 
 	.cart-box image {
 		position: absolute;
 		width: 80rpx;
 		height: 80rpx;
 		left: 20rpx;
 		top: 0rpx;
 		border-radius: 10rpx;
 	}
 
 	.cart-info {
 		width: 100%;
 		padding-left: 120rpx;
 		box-sizing: border-box;
 	}
 
 	.cart-name {
 		font-size: 28rpx;
 		height: 40rpx;
 	}
 
 	.cart-count {
 		position: absolute;
 		top: 10rpx;
 		right: -10rpx;
 	}
 
 	.cart-price {
 		color: #FF6600;
 		font-size: 24rpx;
 	}
 
 	.cart-price .price {
 		font-size: 32rpx;
 	}
 
 	.cart-check {
 		position: absolute;
 		top: 40rpx;
 		left: 10rpx;
 	}
	.list{

		margin-top: 50px;
	}
 	.tabs {
 		padding: 0;
 		width: 100%;
 		background: #fff;
 		position: fixed;
 		z-index: 99;
 		box-sizing: border-box;
 	}
 
 
 
 	.footer-box {
 		text-align: right;
 	}
 
 	.card-footer {
 		margin-bottom: 10rpx;
 	}
 
 	.search-box {
 		position: relative;
 		padding: 0 20rpx;
 	}
 
 	.search button {
 		width: 100%;
 	}
 
 	.userhead {
 		position: absolute;
 		top: 16rpx;
 		left: 20rpx;
 	}
 
 	.userhead image {
 		width: 65rpx;
 		height: 65rpx;
 		border-radius: 50%;
 	}
 
 	.userhead button {
 		padding: 0 20rpx;
 	}
 
 	.search {
 		padding-left: 200rpx;
 		box-sizing: border-box;
 		padding-top: 16rpx;
 	}
 
 	.search .uni-searchbar {
 		padding: 0 !important;
 	}
	.close {
		padding: 10px;
	}
 </style>
